<template>
<div class="container">
    <div class="Dictionaries-top">
        <h1 class="title">字典管理</h1>
    </div>
    <div class="table-box">
        <div class="table-box1">
            <el-table :data="tableData1" border style="width: 676px" @current-change="handleCurrentChange" highlight-current-row>
                >
                <el-table-column type="index" prop="num" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="pTypeCode" label="父级字典类型" width="110" align="center"></el-table-column>
                <el-table-column prop="typeName" label="类型名称" width="110" align="center"></el-table-column>
                <el-table-column prop="typeCode" label="类型编码" width="110" align="center"></el-table-column>
                <el-table-column prop="typeDesc" label="类型描述" width="110" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.typeDesc.length<=12">{{scope.row.typeDesc}}</span>
                        <el-popover v-else placement="top-start" width="200" trigger="hover" :content="scope.row.typeDesc">
                            <el-button class="detail-text" slot="reference">{{scope.row.typeDesc.slice(0,5)}}...</el-button>
                        </el-popover>

                    </template>
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button-group>
                            <!--右侧表格编辑按钮-->
                            <div>
                                <Fother-edit :getDictionariesAll="getDictionariesAll" :typeCode="scope.row.typeCode" :options="tableData1" showBetCode="xtsz-zdgl-bjzdlx"></Fother-edit>
                            </div>

                            <!--
                <Single-deletion></Single-deletion>-->
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="fenye-bottom">
                <Pagination :total="total" :params="ParamsLeft" :get="getDictionariesAll"></Pagination>
            </div>
        </div>
        <div class="table-box2" v-if="isLooking">
            <div class="new-build-box">
                <Create :options="tableData1" :RightList="RightList" :tableData="tableData2" :listList="listList" :pTypeCodeEdit="pTypeCodeEdit" showBetCode="xtsz-zdgl-xjzdx"></Create>
            </div>

            <el-table :data="tableData2" border style="width: 822px">
                <el-table-column type="index" prop="num" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="pItemValue" label="父级字典项值" width="110" align="center"></el-table-column>
                <el-table-column prop="typeCode" label="所属类型编码" width="110" align="center"></el-table-column>
                <el-table-column prop="itemName" label="字典项编码" width="98" align="center"></el-table-column>
                <el-table-column prop="itemValue" label="字典项值" width="98" align="center"></el-table-column>
                <el-table-column prop="itemSort" label="排序" width="70" align="center"></el-table-column>
                <el-table-column prop="itemStatus" label="是否可用" width="100" align="center">
                    <template slot-scope="scope">
                        <el-switch @change="ChangeState(scope.row)" v-model="scope.row.isTrue" active-color="#1677FF" inactive-color="#E5E5E5"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button-group>
                            <!--右侧表格编辑按钮-->
                            <!--
                            <Son-edit :id="scope.row.id" :pItemValue="scope.row.pItemValue" :RightList="RightList" :options="tableData1"></Son-edit>
                -->
                            <el-button type="edit" @click="upDialogEdit(scope.row)" v-if="_SHOWBTN('xtsz-zdgl-bjzdx')">编辑</el-button>
                            <Single-deletion :clearOne="clearOne" :id="scope.row.id" showBetCode="xtsz-zdgl-sczdx"></Single-deletion>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="fenye-bottom">
                <Pagination :total="total2" :params="ParamsRight" :get="RightList"></Pagination>
            </div>
        </div>
    </div>
    <!--右侧子项的编辑按钮弹窗-->
    <el-dialog title="编辑字典项" :visible.sync="dialogFormVisible" width="530px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--父类字典有类型时插入-->
            <div v-if="Fatherobj.pTypeCode.length>0">
                <div class="create-1">
                    <span class="span-1">父级类型编码</span>
                    <span class="span-2">{{this.pTypeCodeEdit}}</span>
                </div>
                <!--下拉框-->
                <div class="father-box">
                    <span class="father-title">父级字典项值：</span>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in listList" :key="item.id" :label="item.itemName" :value="item.itemValue"></el-option>
                    </el-select>
                </div>
            </div>
            <!--父类字典有类型时插入-->
            <div class="create-1">
                <span class="span-1">所属类型编码</span>
                <span class="span-2">{{Fatherobj.typeCode}}</span>
            </div>
            <!--输入框-->
            <el-form-item label=" 字典项编码：" prop="itemName">
                <el-input v-model="ruleForm.itemName" placeholder="请输入字典项编码"></el-input>
            </el-form-item>

            <!--输入框-->
            <el-form-item label="  字典项值：" prop="itemValue">
                <el-input v-model="ruleForm.itemValue" placeholder="请输入字典项值"></el-input>
            </el-form-item>
            <!--输入框-->
            <el-form-item label="  排序：" prop="itemSort">
                <el-input v-model="ruleForm.itemSort" placeholder="请输入排序"></el-input>
            </el-form-item>
            <!--下拉框-->
            <el-form-item label=" 状态：" prop="itemStatus">
                <el-select v-model="ruleForm.itemStatus" placeholder="停用">
                    <el-option label="停用" value="2"></el-option>
                    <el-option label="启用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <!--文本框-->
            <div class="text-box">
                <h1 class="text-title">字典项描述：</h1>
                <el-input type="textarea" placeholder="请输入描述信息" v-model="textarea200" maxlength="200" show-word-limit></el-input>
            </div>
        </el-form>

        <!--结束-->
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="getDictionariesBianJIrIGHT">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import Create from "./Son/Create";
import SonEdit from "./Son/SonEdit";
import FotherEdit from "./Son/FotherEdit";
import Pagination from "@/components/Popup/Pagination.vue";

import SingleDeletion from "@/components/Popup/SingleDeletion";

export default {
    components: {
        Create,
        SonEdit,
        FotherEdit,
        SingleDeletion,
        Pagination,
    },
    data() {
        return {
            pTypeCodeEdit: "",
            listList: [],
            isLooking: false,
            ruleForm: {
                pItemValue: "",
                pTypeCode: "",
                itemName: "",
                itemValue: "",
                itemSort: "",
                itemStatus: "",
            },
            textarea200: "",
            value: "",
            //表格1的数据
            tableData1: [],
            //表格2的数据
            tableData2: [],
            multipleSelection: [],
            ParamsLeft: {
                pageNum: 1,
                pageSize: 10,
            },
            ParamsRight: {
                pageNum: 1,
                pageSize: 10,
                typeCode: "",
            },
            total: 0,
            total2: 0,
            currentRow: null,
            options: [{
                    pTypeCode: 1,
                },
                {
                    pTypeCode: 2,
                },
                {
                    pTypeCode: 3,
                },
                {
                    pTypeCode: 4,
                },
            ],
            dialogFormVisible: false,
            rules: {},
            childrenId: "",
        };
    },
    created() {
        this.getDictionariesAll();
    },
    computed: {
        Fatherobj() {
            return this.$store.state.SystemSettings.Fatherobj;
        },
    },
    methods: {
        //右侧子项编辑按钮事件
        upDialogEdit(row) {
            // this.pTypeCodeEdit
            this.dialogFormVisible = true;
            // this.value = row.pItemValue;
            this.childrenId = row.id;
            //bianji调接口借口
            this.Api.getDictionariesEach({
                id: row.id,
            }).then((res) => {
                // console.log(res, "编辑触发了");
                this.ruleForm = {};
                this.ruleForm = {
                    pItemValue: res.data.pItemValue,
                    pTypeCode: res.data.pTypeCode,
                    itemName: res.data.itemName,
                    itemValue: res.data.itemValue,
                    itemSort: res.data.itemSort,
                    itemStatus: res.data.itemStatus,
                };
                this.value = res.data.pItemValue;
            });
        },
        //右侧弹窗提交事件
        getDictionariesBianJIrIGHT() {
            this.Api.getDictionariesBianJIrIGHT({
                id: this.childrenId,
                pItemValue: this.value,
                itemName: this.ruleForm.itemName,
                itemValue: this.ruleForm.itemValue,
                itemSort: this.ruleForm.itemSort,
                itemStatus: this.ruleForm.itemStatus,
            }).then((res) => {
                // console.log(res,111111)
                this.dialogFormVisible = false;
                this.RightList();
            });
        },
        //是否上架
        ChangeState(row) {
            // console.log(row.isTrue,1111)
            if (row.isTrue == true) {
                this.Api.getDictionariesBianJIrIGHT({
                    id: row.id,
                    pItemValue: row.pItemValue,
                    itemName: row.itemName,
                    itemValue: row.itemValue,
                    itemSort: row.itemSort,
                    itemStatus: 1,
                }).then((res) => {
                    if (res.code == 0) {
                        return this.$message.success("上架成功");
                    } else {
                        return this.$message.success("上架失败");
                    }
                });
            }
            if (row.isTrue == false) {
                this.Api.getDictionariesBianJIrIGHT({
                    id: row.id,
                    pItemValue: row.pItemValue,
                    itemName: row.itemName,
                    itemValue: row.itemValue,
                    itemSort: row.itemSort,
                    itemStatus: 2,
                }).then((res) => {
                    if (res.code == 0) {
                        return this.$message.success("下架成功");
                    } else {
                        return this.$message.success("下架失败");
                    }
                });
            }
        },
        //单行删除
        clearOne(id) {
            // console.log(ID,12121)
            this.Api.getDictionariesClear({
                id: id,
            }).then((res) => {
                this.RightList();
            });
        },
        handleCurrentChange(val) {
            this.currentRow = val;
            console.log(val, "sadsadsad");
            this.isLooking = true;
            localStorage.setItem("DictionariesId", val.typeCode);
            // console.log(this.currentRow, "父类选中时的val");
            // 将点击的父类pTypeCode保存到vuex中，方便新建和编辑时判断是否有父类的类型
            this.$store.commit("SystemSettings/setpTypeCode", val.pTypeCode);
            this.$store.commit("SystemSettings/Fatherobj", val);
            // console.log(this.Fatherobj, "Fatherobj")
            this.ParamsRight = {};
            this.ParamsRight = {
                pageNum: 1,
                pageSize: 10,
                typeCode: this.currentRow.typeCode,
            };
            this.Api.getDictionariesRightList(this.ParamsRight).then((res) => {
                console.log(res, 112);
                if (res.code === "0") {
                    this.tableData2 = [];
                    this.tableData2 = res.data.records;
                    this.total2 = res.data.total;
                    this.tableData2.map((item) => {
                        if (item.itemStatus == 1) {
                            this.$set(item, "isTrue", true);
                        } else if (item.itemStatus == 2) {
                            this.$set(item, "isTrue", false);
                        }
                    });
                    console.log(this.tableData2, "this.tableData2")
                }
                //父字典项的值
                this.pTypeCodeEdit = val.pTypeCode;
                console.log(this.pTypeCodeEdit, "this.pTypeCodeEdit");
                //获取右侧字典列表
                this.Api.getDictionaries({
                    pageNum: "1",
                    pageSize: "99",
                    typeCode: this.pTypeCodeEdit,
                }).then((res) => {
                    this.listList = [];
                    this.listList = res.data.records;
                    console.log(this.listList, "fanhui的数据");
                });
            });
        },
        //右侧分液器实现
        RightList() {
            let typeCode = localStorage.getItem("DictionariesId");
            // console.log(typeCode,1111)
            this.Api.getDictionariesRightList(this.ParamsRight).then((res) => {
                // console.log(res, 112);
                if (res.code === "0") {
                    this.tableData2 = [];
                    this.tableData2 = res.data.records;
                    this.tableData2.map((item) => {
                        if (item.itemStatus == 1) {
                            this.$set(item, "isTrue", true);
                        } else if (item.itemStatus == 2) {
                            this.$set(item, "isTrue", false);
                        }
                    });
                    this.total2 = res.data.total;
                }
            });
        },
        getDictionariesAll() {
            //获取左边类型列表
            this.Api.getDictionariesleftList(this.ParamsLeft).then((res) => {
                // console.log(res,121212)
                this.tableData1 = res.data.records;
                // console.log(this.tableData1,111)
                this.total = res.data.total;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.container {

    //标题行
    .Dictionaries-top {
        display: flex;
        justify-content: space-between;
        padding-bottom: 17px;
        border-bottom: 1px solid #f0f2f5;

        .title {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
        }
    }

    //表格区域
    .table-box {
        margin-top: 20px;
        display: flex;
        height: 100%;

        //第一个表格
        .table-box1 {
            width: 697px;
            background: rgba(255, 255, 255, 1);
            padding: 0 20px 0 0;
            border-right: 1px solid #f0f2f5;
        }

        .table-box2 {
            padding: 20px 0 0 20px;
            width: 842px;
            background-color: rgba(240, 243, 250, 1);
            height: 100%;

            .new-build-box {
                display: flex;
                justify-content: flex-end;
                margin-bottom: 20px;
            }

            /deep/th {
                background-color: rgba(240, 243, 250, 1);
            }

            /deep/td {
                background-color: rgba(240, 243, 250, 1);
            }
        }
    }
}

/**最后一栏的列居中 */
/deep/tbody {
    tr {
        height: 45px !important;

        td {
            padding: 0px 0 !important;
        }
    }

    tr td:last-child {
        .cell {
            .el-button-group {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

/deep/.has-gutter {
    /deep/tr {
        height: 45px;
    }

    tr th:nth-last-of-type(2) {
        >.cell {
            text-align: center;
        }
    }
}

// 最后一栏按钮的间距
/deep/.el-button--edit {
    margin-right: 12px;
}

//分页
.fenye-bottom {
    margin-top: 20px;

    /deep/.el-pagination {
        display: flex;
        justify-content: flex-end;
    }
}

//右侧编辑按钮弹窗的样式
/deep/.el-button--edit {
    width: 60px;
    height: 28px;
    background: rgba(61, 127, 255, 1);
    border-radius: 4px;
    padding: 0;
    color: #ffffff;
    margin-right: 12px !important;
}

/deep/.el-dialog__wrapper {
    z-index: 2091 !important;

    .el-dialog {
        .el-dialog__header {
            background: rgba(230, 233, 237, 1);
            border-radius: 8px 8px 0px 0px;
            border: 1px solid rgba(230, 233, 237, 1);
            padding: 11px 20px 11px 24px;

            .el-dialog__title {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
                line-height: 24px;
            }

            .el-dialog__headerbtn {
                top: 15px;
            }
        }

        .el-dialog__body {
            padding: 30px 29px 0 42px;

            .el-form {
                .el-form-item {
                    margin: 0 0 16px 0;

                    .el-form-item__label {
                        width: 113px !important;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        padding: 0;
                    }

                    .el-form-item__content {
                        margin-left: 113px !important;

                        .el-input__inner {
                            width: 260px;
                            height: 36px;
                            background: rgba(255, 255, 255, 1);
                            border-radius: 4px;
                            border: 1px solid rgba(221, 221, 221, 1);
                            padding-left: 12px;
                        }
                    }
                }

                .pic-box {
                    display: flex;
                    padding-bottom: 10px;

                    .h1-1 {
                        width: 85px;
                        height: 22px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        text-align: right;
                    }

                    .h1-1::before {
                        content: "* ";
                        color: #ff0000;
                    }
                }

                .flex-box {
                    display: flex;
                    justify-content: flex-end;

                    .pic-Tips {
                        width: 360px;
                        padding-top: 6px;
                        padding-bottom: 15px;
                        border-top: 1px solid #dddddd;

                        h1 {
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                            line-height: 22px;
                        }
                    }
                }
            }
        }

        .el-dialog__footer {
            padding: 30px 30px 26px;

            .dialog-footer {
                .el-button--default {
                    width: 70px;
                    height: 36px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 3px;
                    border: 1px solid rgba(215, 219, 224, 1);
                    padding: 0;
                    color: rgba(51, 51, 51, 1);
                }

                .el-button--primary {
                    width: 70px;
                    height: 36px;
                    background: rgba(61, 127, 255, 1);
                    border-radius: 3px;
                    padding: 0;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
}

//新建字典的改动
/deep/.el-form {
    .create-1 {
        padding-bottom: 15px;

        .span-1 {
            display: inline-block;
            width: 100px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 22px;
            text-align: right;
            margin-right: 14px;
        }

        .span-2 {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }
    }
}

//文本框样式
/deep/.text-box {
    display: flex;

    .text-title {
        width: 144px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: right;
    }

    .el-textarea__inner {
        min-height: 100px !important;
        padding-left: 10px;
        width: 345px;
    }
}

.father-box {
    padding: 0 0 0 15px;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 20px;
}

/deep/.el-input {
    width: 131%;
}

//表格边框线的颜色
.el-table--border,
.el-table--group {
    border-color: #dddddd;
}

/deep/.el-table td,
.el-table th.is-leaf {
    border-bottom: 1px solid #dddddd;
}

/deep/.el-table--border th,
.el-table--border th.gutter:last-of-type {
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

/deep/.el-table--border td,
.el-table--border th {
    border-right: 1px solid #dddddd;
}

.el-table--border:after,
.el-table--group:after,
.el-table:before {
    background-color: #dddddd;
}

//yangshi de 修改
.detail-text {
    padding: 0;
    border: 0;

    span {
        color: #333333;
    }
}
</style>
